<template>
  <el-container>
    <el-header>
      <!--头部-->
        <Header></Header>
    </el-header>
    <br>
  <el-main>
    <!--搜索-->
      <Search></Search>
      <!--轮播图开始-->
      <el-row>
        <el-col :span="24">

          <el-carousel indicator-position="outside" style="height:401px" >
            <el-carousel-item v-for="x in imgList"  :key="x.imgUrl" style="height:401px" >

              <a href="/productClass">
                <img :src="require('../../assets/images/'+x.imgUrl)" width="1450" height="401"  >
              </a>

            </el-carousel-item>
          </el-carousel>

        </el-col>
      </el-row>
      <!--轮播图结束-->
    <br>
    <!--女装-->
    <el-tabs type="border-card">
        <el-tab-pane>
          <span slot="label"><i class="el-icon-date"></i>女装精品</span>
          <template v-for="x in list">
            <template v-if="x.imgType==2">
              <el-col :span="12" >
                <el-result :title="x.imgDesc">
                  <template slot="icon">
                    <a @click="toPruduct(2)">
                      <img :src="require('../../assets/images/index/'+x.imgUrl)"  width="678px">

                    </a>
                  </template>
                </el-result>
              </el-col>
            </template>
          </template>

        </el-tab-pane>
      </el-tabs>
    <br>
    <!--男装-->
    <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label"><i class="el-icon-date"></i>男装精品</span>

        <template v-for="x in list">
          <template v-if="x.imgType==1">
            <el-col :span="12" >
              <el-result :title="x.imgDesc">
                <template slot="icon">
                  <a @click="toPruduct(1)">
                    <img :src="require('../../assets/images/index/'+x.imgUrl)"  width="678px">

                  </a>
                </template>
              </el-result>
            </el-col>
          </template>
        </template>
      </el-tab-pane>
    </el-tabs>
    <br>
    <!--鞋包-->
    <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label"><i class="el-icon-date"></i>鞋包精品</span>

          <template v-for="x in list">
            <template v-if="x.imgType==3">
          <el-col :span="12" >
            <el-result :title="x.imgDesc">
              <template slot="icon">
                <a @click="toPruduct(3)">
                <img :src="require('../../assets/images/index/'+x.imgUrl)"  width="678px">

                </a>
              </template>
            </el-result>
          </el-col>
            </template>
          </template>

      </el-tab-pane>
    </el-tabs>

    </el-main>
      <Footer></Footer>
  </el-container>
</template>


<script>
  import Footer from "./myComponents/Footer";  import Header from "./myComponents/Header";
  import Search from "./myComponents/Search";

    export default {
        name: "Index",
        components:{
            Header,
            Search,
            Footer
        },
        methods:{
          toPruduct(num){//跳转到商品分类
            //第二种传值
            localStorage.setItem("proType",num);
            //this.$router.push("/productClass");
            //第一种传值
            this.$router.push({"name":"productClass",query:{"proType":num}});

          },
          query(){ //查询首页数据
               const self = this;
              this.$http.get("/product-index/query")
             .then(function (rs) {
                    console.log(rs.data.data);
                    if(rs.data.code ==200){
                      self.list = rs.data.data;
                      for(var i=0;i<self.list.length;i++){
                        if(self.list[i].imgType==0){
                           self.imgList.push(self.list[i]);
                        }

                      }
                    }else{
                      self.$message("没有查询到数据");
                      //清空list
                      self.list=[];
                    }

             })
          }
        },
        data(){
          return{
             list:[],
             imgList:[]//轮播图数组
        }
      },
      mounted() { //生命周期函数
          this.query();
      }
    }
</script>

<style scoped>

</style>
